import React from 'react';
import {Form, Input, Modal} from "antd";
import {connect} from "dva";
import PicturesWall from "./PicturesWall";

const FormItem = Form.Item;
const InputGroup = Input.Group;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
    md: { span: 10 },
  },
};

@connect()
export default class EditResource extends React.Component{

  state={
    visible:false,
    pics:new Set()
  };

  form = React.createRef()

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  onFinish = (values) => {
    if(this.state.pics.size > 0){
      values.pic = [...this.state.pics].join(',');
    }
    values.id = this.props.record.id;

    this.props.dispatch({
      type: 'house/updateHouseForm',
      payload: values,
    });
    setTimeout(()=>{
      this.handleCancel();
      this.props.reload();
    },500)
  }

  handleFileList = (obj)=>{
    let pics = new Set();
    obj.forEach((v, k) => {
      if(v.response){
        pics.add(v.response.name);
      }
      if(v.url){
        pics.add(v.url);
      }
    });

    this.setState({
      pics : pics
    })
  }

  render(){
    const {record} = this.props;
    return (
      <React.Fragment>
        <a onClick={() => {this.showModal()}}>编辑</a>
        {/* GOOD: 这样可以提交表单, 调用 onFinish 函数
            onCancel={()=>{this.handleCancel()}} */}
        {/* GOOD: 关闭弹出框时销毁
            destroyOnClose={true} */}
        <Modal
          title={'编辑'}
          width={640}
          visible={this.state.visible}
          onOk={()=>{this.form.current.submit()}}
          onCancel={()=>{this.handleCancel()}}
          destroyOnClose={true}
        >
          <div style={{ overflowY:'auto'}}>
            <Form hideRequiredMark style={{ marginTop: 8 }}
                  ref={this.form} onFinish={this.onFinish}>
              <FormItem {...formItemLayout} label="房源标题"
                        name='title' initialValue={record.title} rules={[{ required: true, message:"此项为必填项" }]}>
                <Input style={{ width: '100%' }} disabled={false} />
              </FormItem>
              <FormItem {...formItemLayout} label="租金">
                <InputGroup compact>
                  <FormItem noStyle name='rent' initialValue={record.rent} rules={[{ required: true, message:"此项为必填项" }]}>
                    <Input style={{ width: '50%' }} addonAfter="元/月" />
                  </FormItem>
                </InputGroup>
              </FormItem>
              <FormItem {...formItemLayout} label="建筑面积">
                <InputGroup compact>
                  <FormItem noStyle name='coveredArea' initialValue={record.coveredArea} rules={[{ required: true, message:"此项为必填项" }]}>
                    <Input style={{ width: '40%' }} addonAfter="平米" />
                  </FormItem>
                </InputGroup>
              </FormItem>
              <FormItem {...formItemLayout} label="上传室内图">
                <PicturesWall handleFileList={this.handleFileList.bind(this)} fileList={record.pic}/>
              </FormItem>
            </Form>
          </div>
        </Modal>
      </React.Fragment>
    );
  }
}
